<template>
  <!-- 
  <img src="../assets/img/zhuanti.jpg" alt />-->
  <div class="index">
    <div>
      <Nav :routernav="routernav" />
    </div>
    <div class="shangjiamian">
      <div class="shangjiamiandange">
        <div class="lunbo">
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="../assets/img/shang1.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang2.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang3.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang4.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang4.png" alt />
              </div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>

          <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="../assets/img/shang1.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang2.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang3.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang4.png" alt />
              </div>
              <div class="swiper-slide">
                <img src="../assets/img/shang4.png" alt />
              </div>
            </div>
          </div>
        </div>
        <div class="lunbozi">
          <h2>{{shangdian.name}}</h2>
          <div>
            <p>
              <i class="iconfont icon-duihao2"></i>
              营业时间 ： {{shangdian.yingyetime}}
              <span class="huang">￥{{shangdian.pingjun}}/人</span>
            </p>
            <p>
              <i class="iconfont icon-shouji"></i>
              {{shangdian.phone}}
            </p>
            <p>
              <i class="iconfont icon-jibenxinxi"></i>
              {{shangdian.dizhi}}
            </p>
          </div>
          <div>
            <h4>商家公告 :</h4>
            <div>{{shangdian.gonggao}}</div>
          </div>
        </div>
        <div class="pingjia">
          <div class="zonghe">
            综合评价:
            <span class="pingfen">
              <p></p>
            </span>
            <span class="huang">4.5分</span>
          </div>
          <div class="geti">
            <div>
              <div>描述</div>
              <div class="huang">4.5分</div>
            </div>
            <div class="xian"></div>
            <div>
              <div>商品</div>
              <div class="huang">4.5分</div>
            </div>
            <div class="xian"></div>
            <div>
              <div>服务</div>
              <div class="huang">4.5分</div>
            </div>
          </div>
        </div>
      </div>
      <div class="nav">
        <ul class="clear">
          <li>分类 :</li>
          <li class="active">全部</li>
          <li>餐饮</li>
          <li>酒店</li>
          <li>休闲</li>
          <li>电影</li>
          <li>汽车装饰</li>
          <li>家政服务</li>
        </ul>
      </div>
      <div class="shangjiabottom">
        <indexmaincoll
          v-for="(itme,index) in shangjiabottom"
          :key="itme.index"
          v-show="index<8*danqian&&index>=8*(danqian-1)"
          class="shangjiabottomcoll"
          :zi="itme.name"
          :guige="itme.xiushici"
          :jiage="itme.tejia"
          :url="require('../assets/img/'+itme.imgurl)"
          :yuanjia="itme.danjia"
          :itmeid="itme.id"
        />
        <div class="fenyeqi">
          <fenyeqi @danqainye="danqainye($event)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Nav from "@/components/nav.vue";
import indexmaincoll from "@/components/indexmaincoll.vue";
import fenyeqi from "@/components/fenyeqi.vue";
import Swiper from "swiper";
import axios from "axios";
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      danqian: 1,
      routernav: [
        { zi: "首页", to: "/index/indexshouye" },
        { zi: "同城", to: "" },
        { zi: "未知", to: "" }
      ],
      shangdian: {
        name: "礼拜五旗舰店",
        yingyetime: "全天24小时",
        pingjun: "62",
        phone: "12345678910",
        dizhi: "浙江省温岭市人民西路271左侧",
        gonggao:
          "本店有最优惠的活动,本店有最优惠的活动,本店有最优惠的活动,本店有最优惠的活动,本店有"
      },
      shangjiabottom: [
        {
          id: 1,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        },
        {
          id: 2,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-15.png",
          danjia: "'40.00'"
        },
        {
          id: 3,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-14.png",
          danjia: "'40.00'"
        },
        {
          id: 4,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-13.png",
          danjia: "'40.00'"
        },
        {
          id: 5,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-13.png",
          danjia: "'40.00'"
        },
        {
          id: 6,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-13.png",
          danjia: "'40.00'"
        },
        {
          id: 7,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        },
        {
          id: 8,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        },
        {
          id: 9,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-15.png",
          danjia: "'40.00'"
        },
        {
          id: 10,
          name: "新西兰佳沛黄金奇异果",
          xiushici: "果肉绵密，花蜜般的甘甜百吃不厌",
          tejia: "28.80",
          imgurl: "banner-16.png",
          danjia: "'40.00'"
        }
      ]
    };
  },
  components: {
    Nav,
    indexmaincoll,
    fenyeqi
  },
  methods: {
    danqainye(e) {
      this.danqian = e;
    }
  },
  mounted() {
    var _this = this;
    var url = this.$store.state.url;
    axios.post(url + "shangjiaid", { id: _this.$route.params.id }).then(
      res => {
        // 成功回调
        if (res.data.code == "200") {
          _this.shangdian = res.data.data[0];
          _this.routernav[2].zi = res.data.data[0].name;
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
    axios.post(url + "shangjiaidgoods", { id: _this.$route.params.id }).then(
      res => {
        // 成功回调
        if (res.data.code == "200") {
        window.console.log(res.data.data);
          _this.shangjiabottom =res.data.data
          this.$store.commit('zongye', res.data.data.length)
        }else if(res.data.code == "300"){
          this.$store.commit('zongye', 10);
        window.console.log(res.data);
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
    var galleryThumbs = new Swiper(".gallery-thumbs", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true
    });
    new Swiper(".gallery-top", {
      spaceBetween: 10,
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });
  }
};
</script>
<style scoped>
.indexmain {
  width: 80%;
  margin: 0px auto;
}
.indexmain img {
  width: 100%;
  margin-bottom: 1rem;
}
.guding {
  width: 100%;
  position: fixed;
  top: 0px;
  background-color: #fff;
  z-index: 11;
}
.shangjiamian {
  width: 80%;
  margin: 0px auto;
}
.shangjiamiandange {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
}
.shangjiamiandange .lunbo {
  width: 36%;
}
.shangjiamiandange .lunbo img {
  width: 100%;
}
.swiper-slide-thumb-active img {
  border: 1px solid red;
}
.gallery-thumbs {
  width: 90%;
  margin: 20px auto;
}
.lunbozi {
  width: 30%;
}
.lunbozi h2 + div {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.huang {
  color: #f08200;
  font-size: 1.2rem;
}
.lunbozi .iconfont {
  color: #498e3d;
}
.lunbozi h4 {
  margin-bottom: 0.5rem;
}
.lunbozi h4 + div {
  line-height: 2rem;
}
.pingjia {
  width: 23%;
  background-color: #f4fff2;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.zonghe {
  display: flex;
  align-items: center;
  padding-bottom: 2rem;
}
.pingfen {
  display: inline-block;
  width: 20%;
  height: 5px;
  overflow: hidden;
  margin: 0px 0.5rem;
  position: relative;
  background-color: #ccc;
}
.pingfen p {
  background: #f08200;
  width: 100%;
  height: 10px;
  margin: 0px;
  position: absolute;
  left: -10%;
}
.geti {
  display: flex;
  justify-content: space-around;
}
.xian {
  border-right: 1px dashed #f08200;
}

.nav ul {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  list-style: none;
  margin: 0px;
  padding: 0.6rem 0px;
  font-size: 1rem;
}
.nav ul li {
  float: left;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.nav ul li.active {
  background-color: #498e3d;
  color: aliceblue;
}
.nav ul li:first-of-type {
  padding-left: 0px;
}

.shangjiabottom {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0px;
}
.shangjiabottomcoll {
  margin-right: 1%;
  margin-bottom: 1rem;
}
.shangjiabottomcoll:nth-child(4n) {
  margin-right: 0px;
}
.fenyeqi {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>